import React, {Component} from 'react'
import Taro, {Current} from '@tarojs/taro'
import {AtAvatar, AtIcon} from "taro-ui";
import {Image, View,Input} from '@tarojs/components'
import {formatTime} from '../../utils/tool'
import {delDy, detailDy} from '../../service/dynamic'
import './index.scss'
import {showToast, getStorageSync} from "../../utils/common";
import {createCom,delCom} from "../../service/comment";

type PageStateProps = {}

type PageDispatchProps = {}

type PageOwnProps = {}

type PageState = {
  detailData: {}
  userID: string | undefined
  comment: string
}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface DetailNotice {
  props: IProps;
}

class DetailNotice extends Component<IProps, PageState> {
  state: any = {
    detailData: {},
    userID: undefined,
    comment:''
  }

  componentDidMount() {
    this.loadData()
  }


  async loadData() {
    const {router} = Current;
    if (router) {
      let id = Number(router.params.id)
      let uID = router.params.uID
      const res = await detailDy({
        id: id
      })
      if (res.code === 1) {
        this.setState({
          detailData: res.data,
          userID: uID
        })
      }

    }
  }

  // 删除动态
  handleDelDY(ID) {
    Taro.showModal({
      title: '提示',
      content: '是否删除该动态？',
      success: async (res) => {
        if(res.confirm){
          let param = {
            id: ID
          }
          const data = await delDy(param)
          if(data.code === 1){
            Taro.navigateBack({
              delta: 1
            })
          }
        }
      },
      fail: (err) => {
        console.log(err);
      }
    })
  }

  // 图片预览
  handlePreviewImage(imgList, i) {
    Taro.previewImage({
      current: imgList[i], //所有图片 需要预览的图片链接列表
      urls: imgList  //当前显示图片的链接
    })
  }

  // 获取评论内容
  saveText = (v) =>{
    this.setState({
      comment: v.detail.value
    })
  }

  // 删除评论
  async handleDelComment(id) {
    Taro.showModal({
      title: '提示',
      content: '是否删除该评论？',
      success: async (res) => {
        if(res.confirm){
          const data = await delCom({
            id: id
          })
          if(data.code === 1){
            this.loadData()
          }
        }
      },
      fail: (err) => {
        console.log(err);
      }
    })

  }

  // 发布评论
  async handleSubComment() {
    const {comment,detailData} = this.state
    const {id,user_picture,user_name} = getStorageSync('userInfo')
    if(!id) {
      return showToast('请先登录！')
    }
    if(!comment) {
      return showToast('请输入评论的内容')
    }
    let params = {
      user_id: id,
      dy_id:detailData.id,
      user_name:user_name,
      user_picture:user_picture,
      content:comment
    }
    const res = await createCom(params)
    if(res.code ===1 ){
      this.loadData()
      showToast('发布成功！')
      this.setState({
        comment: ''
      })
    }
  }

  render() {
    const {detailData, userID} = this.state;
    let imgList = detailData.dy_img;
    if(imgList){
      imgList = JSON.parse(imgList) || []
      // console.log(imgList);
    }
    let commentList = detailData.dy_comment || []
    let dL = 0
    if(detailData.dy_like){
      dL = detailData.dy_like.length
    }
    return (
      <View className='detail_dynamic'>
        <View className='dynamic_container'>
          <View className='dynamic_title'>
            <AtAvatar
              className='dynamic_title_img'
              image={detailData.user_picture}
            />
            <View className='dynamic_title_right'>
              <View className='dynamic_title_name'>{detailData.user_name}</View>
              <View className='dynamic_title_time'>{formatTime(detailData.created_at)()}
                {
                  detailData.user_id === userID ?
                    <View
                      className='dy_del'
                      onClick={this.handleDelDY.bind(this, detailData.id)}
                    >删除
                    </View> : ''
                }
              </View>
            </View>
          </View>
          <View className='dynamic_content'>{detailData.dy_content}</View>
          <View className='dy_img_list'>
            {
              imgList && imgList.length !== 0 ?
                imgList.map((url: string, i: number) =>
                  <View
                    onClick={this.handlePreviewImage.bind(this, imgList, i)}
                    className='img_list_item'
                    key={i}
                  ><Image
                    className='img_list_item_img'
                    src={url}
                    mode='aspectFill'
                  /></View>)
                :
                ''
            }
          </View>

          <View className='dy_icon'>
            <AtIcon value='heart' size='16' color='#8a8a8a' className='icon' />
            {dL} 人点赞了
          </View>
        </View>
        <View className='dynamic_comment_list'>
          <View className='dynamic_comment_list_title'>• 评论列表</View>
          {
            commentList && commentList.length !==0 ? commentList.map(i=>
              <View className='dynamic_comment_list_item' key={i.id}>
                <View className='dynamic_comment_list_item_top'>
                  <AtAvatar
                    circle
                    size='small'
                    className='dynamic_comment_list_auth'
                    image={i.user_picture}
                  />
                  <View className='dynamic_comment_list_content'>
                    <View className='dynamic_comment_list_content_title'>{i.user_name}</View>
                    <View className='dynamic_comment_list_content_content'>{i.content}</View>
                  </View>
                </View>
                <View className='dynamic_comment_list_item_bottom'>
                  <View className='dynamic_comment_list_item_bottom_left'>{formatTime(i.created_at)()}</View>
                  {
                    i.user_id === userID ?
                      <View className='dynamic_comment_list_item_bottom_right' onClick={this.handleDelComment.bind(this,i.id)}>删除</View> : ''
                  }

                </View>
              </View>
            ) : <View className='dynamic_comment_nodata'>暂时还没有人来评论哦〰</View>
          }
        </View>
        <View className='dy_form'>
          <Input value={this.state.comment} className='dy_form_input' placeholder='请输入评论的内容...' onInput={this.saveText} />
          <View className='submitCom' onClick={this.handleSubComment.bind(this)}>
            发布
          </View>
        </View>
      </View>
    )
  }
}

export default DetailNotice
